import React, {Component} from 'react'
import {
    Text,
    Image,
    View,
    StyleSheet,
    Button
} from 'react-native'
import FasterLitst from "./FasterLitst";
import ListViewDemo from "./ListViewDemo";
import SectionListst from "./SectionLitst";

export default class HomePage extends Component {
    constructor(props) {
        super(props)
    }

    static defaultProps = {
        name: 'xiaoluo'
    }

    render() {
        const {navigation} = this.props;
        var params = this.defaultProps;
        return (
            <View>
                <Text>
                    欢迎来到HomePage
                </Text>
                <Button
                    title="Go to Page1"
                    color="#FF0000"
                    onPress={() => {
                        navigation.navigate('Page1', {name: "动态的name"})
                    }}

                >

                </Button>

                <Button
                    title="Go to Page2"
                    onPress={() => {
                        navigation.navigate('Page2')
                    }}
                >

                </Button>

                <Button
                    title="go to Page3"
                    onPress={() => {
                        navigation.navigate('Page3', {title: "Hello Page 3"})
                    }}
                />

                <Button
                    title="Go to TabNavigator"
                    onPress={() => {
                        navigation.navigate('TabNav', {title: "Hello TabNav"})
                    }}
                />

                <Button
                    title="Go to DrawerNav"
                    onPress={() => {
                        navigation.navigate('DrawerNav', {title: "Hello TabNav"})
                    }}
                />

                <Button
                    title="FasterListDemo"
                    onPress={() => {
                        navigation.navigate('FasterLitst')
                    }}
                />

                <Button
                    title="SectionListDemo"
                    onPress={() => {
                        navigation.navigate('SectionList')
                    }}
                />

                <Button
                    title="ListViewDemo"
                    onPress={() => {
                        navigation.navigate('ListViewDemo')
                    }}
                />

                <Button
                    title="样式测试"
                    onPress={() => {
                        navigation.navigate('StyleDemo')
                    }}
                />

                <Button
                    title="titleBar"
                    onPress={() => {
                        navigation.navigate('TitleBar')
                    }}
                />

                <Button
                    title="网络请求"
                    onPress={() => {
                        navigation.navigate('Fetch')
                    }}
                />

                <Button
                    title="scrollview"
                    onPress={() => {
                        navigation.navigate('SV')
                    }}
                />

                <Button
                    title="Welcome"
                    onPress={() => {
                        navigation.navigate('Welcome')
                    }}
                />

                <Button
                    title={"MyPage"}
                    onPress={() => {
                        navigation.navigate('MyPage', {
                            key: this.props.name,
                            onGoBack: (params) => {
                                alert(params)
                            }
                        })
                    }}
                />

            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5FCFF',
    },
    page1: {
        flex: 1,
        backgroundColor: 'red'
    },
    page2: {
        flex: 1,
        backgroundColor: 'blue'
    },
    image: {
        width: 22,
        height: 22
    }
})